<template>
  <div class="class-detail">
    <!-- 返回按钮 -->
    <div class="back-btn" @click="$router.go(-1)">
      ← 返回
    </div>

    <!-- 班级课程信息 -->
    <div class="class-header">
      <h2>计算机科学1班 - 数据结构</h2>
      <p>任课教师：张老师 | 学生人数：30人</p>
    </div>

    <!-- 班级整体统计 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-title">平均分</div>
        <div class="stat-value">85.5</div>
        <div class="stat-trend up">↑ 2.3</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">及格率</div>
        <div class="stat-value">95%</div>
        <div class="stat-trend up">↑ 1.5%</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">出勤率</div>
        <div class="stat-value">98%</div>
        <div class="stat-trend down">↓ 0.5%</div>
      </div>
    </div>

    <!-- 学生列表 -->
    <div class="student-list">
      <div class="list-header">
        <h3>学生成绩列表</h3>
        <div class="search-box">
          <input type="text" v-model="searchText" placeholder="搜索学生...">
        </div>
      </div>

      <table class="student-table">
        <thead>
          <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>平时成绩</th>
            <th>考试成绩</th>
            <th>总评</th>
            <th>排名</th>
            <th>出勤率</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="student in filteredStudents" :key="student.id">
            <td>{{ student.id }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.usualScore }}</td>
            <td>{{ student.examScore }}</td>
            <td :class="getScoreClass(student.totalScore)">{{ student.totalScore }}</td>
            <td>#{{ student.rank }}</td>
            <td>{{ student.attendance }}%</td>
            <td>
              <span :class="['status', student.status]">
                {{ student.statusText }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const searchText = ref('')

// 模拟学生数据
const students = ref(Array(30).fill(null).map((_, index) => {
  const totalScore = Math.floor(Math.random() * 41) + 60 // 60-100
  return {
    id: `2023${String(index + 1).padStart(2, '0')}`,
    name: `学生${index + 1}`,
    usualScore: Math.floor(Math.random() * 41) + 60,
    examScore: Math.floor(Math.random() * 41) + 60,
    totalScore,
    rank: index + 1,
    attendance: Math.floor(Math.random() * 20) + 80,
    status: totalScore >= 85 ? 'excellent' : totalScore >= 75 ? 'good' : totalScore >= 60 ? 'pass' : 'fail',
    statusText: totalScore >= 85 ? '优秀' : totalScore >= 75 ? '良好' : totalScore >= 60 ? '及格' : '不及格'
  }
}))

// 过滤学生列表
const filteredStudents = computed(() => {
  return students.value.filter(student => 
    student.name.includes(searchText.value) || 
    student.id.includes(searchText.value)
  )
})

// 获取成绩样式
const getScoreClass = (score) => {
  if (score >= 85) return 'score-excellent'
  if (score >= 75) return 'score-good'
  if (score >= 60) return 'score-pass'
  return 'score-fail'
}
</script>

<style scoped>
.class-detail {
  padding: 30px;
  background: #f5f6fa;
  min-height: 100vh;
}

.back-btn {
  padding: 8px 16px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.class-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.class-header h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.class-header p {
  color: #666;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-title {
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.stat-trend {
  font-size: 14px;
}

.stat-trend.up { color: #52c41a; }
.stat-trend.down { color: #f5222d; }

.student-list {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box input {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  width: 200px;
}

.student-table {
  width: 100%;
  border-collapse: collapse;
}

.student-table th,
.student-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.student-table th {
  background: #fafafa;
  font-weight: 500;
}

.score-excellent { color: #52c41a; }
.score-good { color: #1890ff; }
.score-pass { color: #722ed1; }
.score-fail { color: #f5222d; }

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status.excellent {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status.good {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.status.pass {
  background: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.status.fail {
  background: #fff2f0;
  color: #f5222d;
  border: 1px solid #ffccc7;
}
</style> 